<template>
    <div class="box">
      <el-table
        :data="tableData"
        @row-click="handleRowClick"
        style="width: 100%">
        <el-table-column
          prop="title"
          label="文章标题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="type"
          label="文章类型"
          width="180">
        </el-table-column>
        <el-table-column
          prop="collectiontime"
          label="收藏时间">
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :current-page="pageInfo.pageNum"
          @current-change="handleCurrentChange"
          :page-count="pageCount"
          :page-size=pageInfo.pageSize
          :hide-on-single-page="true"
          >
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import {GetOwnCollection,GetOwnCollectionByPage} from '@/request/api'
  export default {
    data(){
      return{
        tableData:[],
        params:{
          pageNum:1,
        },
        pageInfo:{
          
        },
        pageCount:null,
      }
    },
    async created(){
      let res = await GetOwnCollectionByPage(this.params)
      this.pageInfo = res.data.data
      this.tableData = res.data.data.list
      this.pageCount = Math.ceil(res.data.data.total/5)
    },
    methods:{
      handleRowClick(row,column,event){
        this.$router.push({path:'/high/detail',query:{secretid:row.secretid}})
      },
      async handleCurrentChange(pageNum){
        this.params.pageNum = pageNum
        let res = await GetOwnCollectionByPage(this.params)
        this.pageInfo = res.data.data
        this.tableData = res.data.data.list
        this.pageCount = Math.ceil(res.data.data.total/5)
      }
    }
  }
  </script>
  
  <style scoped>
  .block{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>
  